<template>
  <div class="zhiboxitong">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
          <div class="zhiboxitong_right">
            <div style="margin-bottom: 20px;background-color: #DAE7F5;font-size: 14px;color:#333333;display: flex;padding: 11px 12px;align-items:center;border-radius: 10px;width:99%">
    
               <img src="../../static/img/bluelogo.png" style="width:20px;height:20px;margin:0 5px 0 20px;"/>
              <div>该页面的作用是把所有小程序的主页汇总罗列在一起，通过该页面可让用户在小程序的不同页面间穿梭浏览</div>
            </div>
            <div class="title_flex">
              <div style="margin:0 0 24px 30px;font-weight:bold;font-size:18px;color:#333">
                <i class="el-icon-arrow-left" style="cursor: pointer;" @click="backgo"></i> 汇总页</div>
            
              
              </div>
            <div class="table_container">
                <el-table
                :header-cell-style="{fontSize: '14px', backgroundColor: 'rgba(246,247,252,0.9)' }"
                :cell-style="{fontSize: '14px', backgroundColor: 'rgba(246,247,252,0.9)' }"
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                type="index"
                align="center"
                width="100px"
                label="序列">
                </el-table-column>
                <el-table-column
                prop="title"
                align="center"
                label="">
                    <template slot="header">
                        <div>
                          页面名称
                          <el-popover
                            placement="top-start"
                            title=""
                            width="240"
                            trigger="hover"
                            content="该页面名称将显示在用户端">
                            <el-button style="width: 16px;height: 16px;line-height: 16px;padding: 0;font-size: 13px;background-color: #000000A6;border-radius: 50%;color: white;" type="text" slot="reference">?</el-button>
                          </el-popover>
                        </div>
                    </template>
                    <template slot-scope="scope">
                        <span >{{ scope.row.title }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="title"
                align="center"
                label="是否展示">
                    <template slot-scope="scope">
                      <el-switch
                        @change="changeshow($event,scope.row)"
                        v-model="scope.row.summary_is_display"
                        :active-value="1" 
                        :inactive-value="0"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                      </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                prop="title"
                align="center"
                label="展示标题">
                    <template slot-scope="scope">
                      <div>{{ scope.row.summary_title }}<i @click="changetitle(scope.row)" class="el-icon-edit" style="cursor: pointer;margin-left: 10px;"></i></div>
                    </template>
                </el-table-column>
                <el-table-column
                prop="title"
                align="center"
                label="页面描述">
                    <template slot-scope="scope">
                      <div>{{ scope.row.summary_description }}<i @click="changedesc(scope.row)" class="el-icon-edit" style="cursor: pointer;margin-left: 10px;"></i></div>
                    </template>
                </el-table-column>
                <el-table-column
                prop="title"
                align="center"
                label="图片展示">
                    <template slot-scope="scope">
                      <img @click="checkimg(scope.row.summary_pic)" v-if="scope.row.summary_pic" :src="scope.row.summary_pic" style="width: 400px;cursor: pointer;" alt="">
                      <div v-else>上传图片1035*432</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作"  align="center">
                    <template slot-scope="scope">
                      <div @click="openimg(scope.row)">
                        <chuantu  fonttype="fonttype" ref="chuantu4" @getimg="getimg4"  ></chuantu>
                      </div>
                               
                    </template>
                </el-table-column>
            </el-table>
            </div>
          </div>
      </div>
    </div>

    <!-- 编辑标题 -->
    <el-dialog
      title="编辑标题"
      :visible.sync="isshowtitle"
      :close-on-click-modal="false"
      width="500px">
      <el-input v-model="edittitle" placeholder="请输入内容"></el-input>
      <div style="text-align: center;margin-top: 30px;">
        <el-button type="primary" round @click="suretitle">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑描述 -->
    <el-dialog
      title="编辑描述"
      :visible.sync="isshowdesc"
      :close-on-click-modal="false"
      width="500px">
      <el-input v-model="editdesc" type="textarea"
  :rows="2" placeholder="请输入内容"></el-input>
      <div style="text-align: center;margin-top: 30px;">
        <el-button type="primary" round @click="suredesc">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查看大图 -->
    <el-dialog
      title="查看大图"
      :visible.sync="isshowimg"
      width="800px">
      <img :src="bigimg" style="width: 100%;" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import chuantu from "../components/chuantu.vue";
  export default {
    components: {
      top,
      left,
      chuantu
    },
    name: "zhiboxitong",
    data() {
      return {
          tableData: [],
          shopid:'',
          isshowtitle:false,
          edittitle:'',
          isshowdesc:false,
          editdesc:'',
          nowchoose:{},
          isshowimg:false,
          bigimg:''
      }
    },
    beforeCreate() {

    },
    created() {
      
      axios.get(`${this.apis}/api/account/shop/info`)
      	.then(response => {
          if (response.data.msg.code == 0) {
            this.shopid = response.data.data.shop_id
          }else{
            this.$message.error(response.data.msg.info);
          }
        })
    },
    mounted() {
      this.getlist()



    },
    methods: {
      
      getlist: function() {
        axios.get(`${this.apis}/api/store/list?page=1&page_size=100&type=5&app_id=${this.$route.query.app_id}`)
          .then(response => {
              if (response.data.msg.code == 0) {
                  console.log(response.data.data.data)
                  this.tableData = response.data.data.data
              } else {
                  this.$message.error(response.data.msg.info);
              }
          });

        
      },
      backgo(){
        this.$router.push({path:'/zhiboxitong/xiaochengxu/xcxstorelist',query:{
            app_id:this.$route.query.app_id,
            xcxtype:this.$route.query.xcxtype,
          }})
      },
      changetitle(row){
        this.nowchoose = row
        this.edittitle = row.summary_title
        this.isshowtitle = true
        
      },
      suretitle(){
        

        axios.post(`${this.apis}/api/summary/store/set`,{
            id:this.nowchoose.id,
            summary_title:this.edittitle
          })
          .then(response => {
              if (response.data.msg.code == 0) {
                  this.getlist()
                  this.isshowtitle = false
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
              } else {
                  this.$message.error(response.data.msg.info);
              }
          });
      },
      changedesc(row){
        this.nowchoose = row
        this.editdesc = row.summary_description
        this.isshowdesc = true
      },
      suredesc(){
        
        axios.post(`${this.apis}/api/summary/store/set`,{
            id:this.nowchoose.id,
            summary_description:this.editdesc
          })
          .then(response => {
              if (response.data.msg.code == 0) {
                  this.getlist()
                  this.isshowdesc = false
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
              } else {
                  this.$message.error(response.data.msg.info);
              }
          });
      },
      getimg4:function(img,index){
        console.log('getimg4')
        console.log(img)
        // this.newpeizhi.top_banner = img
        axios.post(`${this.apis}/api/summary/store/set`,{
            id:this.nowchoose.id,
            summary_pic:img
          })
          .then(response => {
              if (response.data.msg.code == 0) {
                  this.getlist()
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
              } else {
                  this.$message.error(response.data.msg.info);
              }
          });
      },
      changeshow(val,row){
          console.log(val,row.id)
          axios.post(`${this.apis}/api/summary/store/set`,{
            id:row.id,
            summary_is_display:val
          })
          .then(response => {
              if (response.data.msg.code == 0) {
                  this.getlist()
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
              } else {
                  this.$message.error(response.data.msg.info);
              }
          });
      },
      openimg(row){
        this.nowchoose = row
      },
      checkimg(url){
        this.isshowimg = true
        this.bigimg = url
      }
    }
  }
</script>
<style scoped>
  .el-alert--info.is-light{
    background-color: #E4EEFF;
  }
  .t_type_font{
    font-size: 14px;
    display: flex;
  }
  .t_error_res{
    font-size: 14px;
    color: #FF3131;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .t_xcx_title{
    font-size: 18px;
    color: #6C6C6C;
    font-weight: bold;
    margin-bottom: 20px;
}
.no_bb{
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 100px;

}
</style>
<style scoped lang="less">
  .zhiboxitong {
    // background: #f2f2f2;
    min-height: 100vh;
    /deep/ .el-button--danger.is-plain{ background: #fff;}
    /deep/ .el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover{
      background: #fff; color: #F56C6C;
    }
    * {
      box-sizing: border-box;
    }
    .z{width: 120px;text-align: right;padding-right: 20px; font-size: 14px;}
    .r{}
    .zhiboxitong_content {
      height: calc(100vh - 70px);

      .left {
        width: 210px;
        background: #FAFAFE;
        height: 100%;
      }

      .right {
        width: calc(100vw - 220px);
        height: 100vh;

        // padding: 10px;
        // height: calc(100vh - 70px);
        overflow: auto;

        .zhiboxitong_right {


          
          border-radius: 5px;
          padding: 20px 0 0 20px;
        }

        .zhiboxitong_table {
          margin-top: 30px;
          background: #F8F9FD;
        }

        .xiaochengxuli {
          background: #f9f9f9;
          margin: 10px;
          padding: 20px;
          width: 420px;
          position: relative;

          img {
            width: 100px;
            height: 100px;
          }
        }
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    .title_flex{
      display: flex;
      justify-content: space-between;
    }
      /deep/ .el-dialog{
    border-radius:20px;
  }
  
  /deep/ .el-input__inner {
    border-radius:10px;
  background: #F3F5F8;
  // border: none !important;
  box-shadow: none !important;
}
/deep/ .el-dialog__title {
  font-size: 20px;
  font-weight: bold; /* 修改标题字体大小 */
}
/deep/ .el-table{
  background-color: #F8F9FD;
}

// 划过改变table表格背景颜色
/deep/ .el-table__body tr:hover td {
  background-color: white !important;
}
/deep/ .el-table__body tr td:first-child {
  border-radius: 20px 0 0 20px;
   padding-left: 10px;
  box-sizing: border-box;
}
/deep/ .el-table__body tr td:last-child {
  border-radius: 0 20px 20px 0;
}
// 划过改变table表格背景颜色
/deep/ .el-table__body tr:hover > td {
  background-color: white !important;
}
//去掉每行的下边框
  /deep/ .el-table td.el-table__cell,/deep/ .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
    border-right: none;
  } 
 
// 去掉表格单元格边框
.customer-table th{
    border:none;
  }
.customer-table td,.customer-table th.is-leaf {
  border:none;
}
// 表格最外边框
.el-table--border, .el-table--group{
  border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf{
  border: 1px solid #EBEEF5;
  border-right: none;
}
.customer-table thead tr th:nth-last-of-type(2){
  border-right: 1px solid #EBEEF5;
  
}
// 表格最外层边框-底部边框
.el-table--border::after, .el-table--group::after{
  width: 0;
}
/deep/ .el-table__body td {
  height: 72px;
}
.customer-table::before{
  width: 0;
}
.customer-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
}
// 表格有滚动时表格头边框
.el-table--border th.gutter:last-of-type {
    border: 1px solid #EBEEF5;  
    border-left: none;
}
// 去除边框线
/deep/ .el-table::before {
    height: 0;
}
.table_container{
  width: 100%;
  height: 100%;
  padding: 20px;
  background: rgba(246,247,252,0.9);
   border-top-left-radius: 30px;

}
  }
</style>
